<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>教育缴费</title>
    <link rel="stylesheet" href="./static/css/web.css"/>
    <link rel="stylesheet" href="./static/css/payment.css">
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.css">
    <style type="text/css">
        .info-table {
            width: 100%;
            border: solid 1px #e5e5e5;
        }

        .info-table th, .info-table td {
            padding: 15px;
            vertical-align: middle;
            border-bottom: solid 1px #e5e5e5;
            border-right: solid 1px #e5e5e5;
        }

        .info-table th {
            width: 120px;
            background: #f9f9f9;
            text-align: right;
            color:#777;
        }

        .h3_title {
            font-size: 16px;
            margin-bottom: 10px;
            color: #555;
        }
    </style>
</head>
<body style="background: #e7e8eb;">
<div id="app" v-cloak>
    <div class="mainHeaderBox">
        <div class="mainHeaderBoxContent">
            <div class="mainHeaderBoxContentLog" @click="toPage('../main.html')">
                <!--<img src="../img/logo.png">
                <span>仁众智慧餐饮云平台</span>-->
                <img src="https://www.yqsh.cn/img/logo.png" id="show_logo">
                <span id="show_name">微信体验学校</span>
            </div>
            <div class="mainHeaderBoxContentMenus">
                <!--
                    作者：303740339@qq.com
                    时间：2019-02-13
                    描述：<div class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive">
                -->
                <a class="mainHeaderBoxContentMenu" href="../contacts.html">
                    通讯录
                </a>
                <a class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive" href="../workbench.html">
                    工作台
                </a>
                <a class="mainHeaderBoxContentMenu" href="../incrementService.html">
                    增值服务
                </a>
                <a class="mainHeaderBoxContentMenu" href="../html/dataCenter/index.html">
                    消费数据
                </a>
                <a class="mainHeaderBoxContentMenu" href="../consum.html">
                    数据总览
                </a>
                <a class="mainHeaderBoxContentMenu" href="../setting.html">
                    设置
                </a>
            </div>
            <div class="exit" onclick="logout()">
                退出
            </div>
        </div>
    </div>
    <div class="mainContentBox w1200 auto-height">
        <div class="contact-home-box">
            <div class="left-panel">
                <ul class="main-menu-nav" style="margin: 20px 0;">
                    <li class="menu-two" :class="{'hover':item.url && window.location.href.indexOf(item.url)>=0}" v-for="item in menus">
                        <a :href="item.url"><span>{{item.title}}</span></a>
                    </li>
                </ul>
            </div>
            <div class="right-panel">
                <div style="margin: 20px 20px 40px 20px;min-height:550px;">
                    <div class="header-title dline">
                        <h3 class="h3_title">缴费</h3>
                        <p>可以完成个人的缴费</p>
                    </div>
                    <div class="input-group" style="width:400px;">
                        <input type="text" class="form-control" placeholder="请输入缴费项目的缴费用户的姓名、学号或身份证号">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button">查询</button>
                        </div>
                    </div>
                    <div style="margin:20px 0;">
                        <h3 class="h3_title">用户信息</h3>
                        <table class="info-table">
                            <tr>
                                <th>姓名：</th>
                                <td colspan="5">测试用户</td>
                            </tr>
                            <tr>
                                <th>部门：</th>
                                <td>一年级二班</td>
                                <th>手机号码：</th>
                                <td>1398000999999</td>
                                <th>身份证号：</th>
                                <td>5101241987554455</td>
                            </tr>
                            <tr>
                                <th>性别：</th>
                                <td>男</td>
                                <th>入学时间：</th>
                                <td colspan="3">2020-1-1</td>
                            </tr>
                        </table>
                    </div>
                    <div style="margin:20px 0;">
                        <h3 class="h3_title">缴费项目</h3>
                        <table class="info-table">
                            <tr>
                                <th>缴费项目：</th>
                                <td colspan="5"><b>校服费</b></td>
                            </tr>
                            <tr>
                                <th>缴费金额：</th>
                                <td colspan="5"><b>380元</b></td>
                            </tr>
                            <tr>
                                <th>缴费类型：</th>
                                <td>教学杂费</td>
                                <th>缴费开始时间：</th>
                                <td>2020-5-1</td>
                                <th>缴费结束时间：</th>
                                <td>2020-9-1</td>
                            </tr>
                            <tr>
                                <th>缴费类型：</th>
                                <td colspan="5">
                                    <button type="submit" class="btn btn-primary">立即缴费</button>
                                    &nbsp;
                                    <button type="submit" class="btn btn-outline-primary">现金缴费</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footerBox">
        <div class="footerBoxContent">
            Copyright Notice：@2020 YQSH. All Rights Reserved | ICP：蜀ICP备19024447号-1
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript" src="./static/js/vue.min.js"></script>
<script type="text/javascript" src="./static/js/vue-resource.min.js"></script>
<script type="text/javascript" src="./static/js/utils.js"></script>
<script type="text/javascript" src="./static/js/jquery.js"></script>
<script type="text/javascript" src="./static/js/layer/layer.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {},
        mounted: function () {
        }
    });
</script>